<template>
    <view class="page">
		<view class="formBox bg-fff boxShow">
            <view class="title font15 fontBold">问题描述</view>
            <view class="col-grey font13 top-10">请简单描述您的问题（审核通过后将在平台展示）</view>
            <textarea class="contentInp top-15 bg-gray" :focus="true" v-model="content"></textarea>
		</view>
        
        <!-- <view class="formBox bg-fff boxShow">
            <view class="title font15 fontBold">问题分类 (最多选择3项)</view>
            <view class="tagsList flex top-20" v-for="(item, index) in tagList" :key="index">
                <text class="points" :class="{'bg-theme':index==0,'bg-FF7144':index==1, 'bg-primary':index==2}"></text>
                <view class="tags font12 left-10">
                    <block v-for="(tag, num) in item" :key="num">
                        <text class="tag bg-gray right-10 bottom-10" :class="{'bg-theme col-fff': index==0&&tag.checked, 'bg-FF7144 col-fff': index==1&&tag.checked, 'bg-primary col-fff': index==2&&tag.checked}" @click="changeTags(tag)">{{tag.name}}</text>
                    </block>
                </view>
            </view>
        </view> -->
        
        <view class="bottom bg-fff">
            <button class="nextBtn clearBtn" @click="nextPage">提交</button>
        </view>
    </view>
</template>

<script>
    import { mapState, mapActions } from 'pinia';
    import { useIndexStore, useUserInfoStore } from '@/store/index';
    import { checkLogin, checkUserInfo } from '@/common/common';
    import { createFAQ } from '@/common/api/forum';
	export default {
        data() {
            return {
                content: '',
                // tagList: [],
                // chooseTags: []
            }
        },
        computed: {
        	...mapState(useUserInfoStore, ['userInfo']),
            ...mapState(useIndexStore, ['nowCityCode'])
            
        },
        onLoad(options){
            uni.hideShareMenu();
            const that = this;
            uni.$check_and_login(function (){
                // that.init()
            })
        },
		
        methods: {
            ...mapActions(useIndexStore, ['setUpdateForum']),

            //初始化
            // init() {
            //     getForumTags(this.nowCityCode).then(res => {
            //         if(res.status == 0) {
            //             if(res.detail.length == 0) return;
            //             this.tagList = res.detail?.map(item => {
            //                 return item.map(child => {
            //                     return {name: child.label, checked: false}
            //                 })
            //             })
            //         }else {
            //             uni.$u.toast(res.detail);
            //         }
            //     })
            // },
            
            //选择标签
            // changeTags(row) {
            //     if(row.checked) {
            //         for(let i=0; i<this.chooseTags.length; i++) {
            //             if(this.chooseTags[i].name == row.name) {
            //                 this.chooseTags.splice(i, 1);
            //                 i--;
            //             }
            //         }
            //         row.checked = !row.checked;
            //     }else {
            //         if(this.chooseTags.length > 2) {
            //             uni.$u.toast('最多只能选择3个哦');
            //             return
            //         };
            //         this.chooseTags.push(row);
            //         row.checked = !row.checked;
            //     }
            // },
            
            //下一页
            async nextPage() {
                if(!checkLogin()) {
                    uni.navigateTo({
                        url: '/pages/login/login'
                    })
                    return
                }
                if(!checkUserInfo()) {
                    uni.navigateTo({
                        url: `/pages/login/user-info-form`
                    })
                    return
                }

                // 内容监测
                const content = this.content.trim();
                if(content.length < 1) {
                    uni.$u.toast('请输入有效内容');
                    return
                }

                try {
                    const res = await createFAQ({
                        content: content
                    })
                    if(res.status !== 0) {
                        uni.$u.toast(res.detail);
                        return
                    }
                    this.setUpdateForum(true);

                    uni.navigateTo({
                        url: '/pages/tools/question/question-publish-success'
                    })
                } catch (error) {
                    uni.$u.toast('网络错误,请稍后重试');
                }
            }
        }
    }
</script>

<style scoped lang="scss">
    .page{
        line-height: 1;
        min-height: 100vh;
        position: relative;
        padding-bottom: 170rpx;
        .formBox{
            border-radius: 20rpx;
            overflow: hidden;
            margin: 28rpx;
            padding: 28rpx;
            .contentInp{
                padding: 10rpx;
                width: calc(100% - 20rpx);
                height: 20vh;
            }
            .tagsList{
                align-items: flex-start;
                .points{
                    display: inline-block;
                    width: 14rpx;
                    height: 14rpx;
                    border-radius: 50%;
                    margin-top: 10rpx;
                }
                .tags{
                    width: calc(100% - 30rpx);
                    .tag{
                        padding: 6rpx 14rpx 8rpx 14rpx;
                        border-radius: 6rpx;
                        display: inline-block;
                    }
                }
            }
        }
        .bottom{
            position: fixed;
            bottom: 0;
            left: 0;
            width: 100%;
            z-index: 10;
            .nextBtn{
                font-size: 28rpx;
                height: 80rpx;
                line-height: 80rpx;
                color: #FFFFFF;
                background-color: $theme-color;
                margin: 20rpx 28rpx 50rpx 28rpx;
            }
        }
    }
</style>
